<template>
    <div style="height:100%">
        <!-- :imgPoint="imgPoint"  -->
        <commonLayout @getData="getData" :drawer="drawer" @closeDrawer="closeDrawer" :review="review"
            :deviceSystem="formSearch.drawerDevSys" :deviceBrand="formSearch.deviceBrand" :url="imgPoint.url">

            <template slot="btn">
                <el-upload class="upload-demo" :action="uploadPath" :before-upload="beforeUpload" ref="upload"
                    :on-success="onSuccess" :show-file-list='false' :limit="1" :on-error="onError">
                    <el-button size="small" type="primary">修改底图</el-button>
                </el-upload>
            </template>

            <template slot="search">
                <div class="searchForm">
                    <!-- 图例  提示 -->
                    <tips></tips>

                    <div class="form">
                        <!-- <el-button size="mini" type="warning" class="">编辑</el-button> -->
                        <el-button size="mini" type="primary" @click="save">保存</el-button>
                        <el-button size="mini" type="success" class="el-icon-plus" @click="addDevice">添加设备
                        </el-button>
                        <el-form :model="formSearch" class="form_demo" :inline='true'>
                            <el-form-item label="系统" class="devForm">
                                <el-select v-model="formSearch.drawerDevSys" @change="changeSelect" placeholder="请选择系统">
                                    <el-option label="监控系统" :value="1"></el-option>
                                    <el-option label="门禁系统" :value="2"></el-option>
                                    <el-option label="停车场" :value="3"></el-option>
                                    <el-option label="安防报警-公区" :value="4"></el-option>
                                    <el-option label="安防报警-室内" :value="5"></el-option>
                                    <el-option label="火灾报警" :value="6"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="品牌" class="devForm">
                                <el-select v-model="formSearch.deviceBrand" placeholder="请选择设备品牌">
                                    <el-option v-for="item in devBrandList" :key="item.deviceType"
                                        :label="item.deviceType" :value="item.deviceType"></el-option>
                                </el-select>
                            </el-form-item>

                        </el-form>
                        <!-- <el-input size="mini" class="marginLeft10" v-model="devName" placeholder="请输入设备名称" /> -->
                    </div>
                </div>
            </template>

            <template slot="data">
                <!-- <div class="tableData" v-if="sectionId">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="deviceName" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="areaName" label="区域名称">
                        </el-table-column>
                        <el-table-column prop="isOnLine" label="是否在线">
                            <template slot-scope="scope">
                                <div>
                                    {{scope.row.isOnline?'在线':'离线'}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isOpen" label="是否开门">
                            <template slot-scope="scope">
                                <div>
                                    {{scope.row.isOpen?'开门':'关门'}}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div> -->
                <div>
                    <videoList v-show="tableFlag == 1"></videoList>
                    <doorDevInfo v-show="tableFlag == 2"></doorDevInfo>
                    <parking v-show="tableFlag == 3"></parking>
                    <mapping v-show="tableFlag == 4"></mapping>
                    <fire v-show="tableFlag == 5"></fire>
                </div>
            </template>

        </commonLayout>
    </div>
</template>

<script>
import commonLayout from '../../components/common_layout.vue';
import tips from '../../components/legend_tips.vue';
import doorDevInfo from '../yunmenjin/acs_dev.vue';
import videoList from '../video_monitoring/homeVideoList.vue';
import parking from '../parking/carDevs.vue'
import mapping from '../invade_sys/deviceMapping.vue'
import fire from '../fire_sys/fire.vue'
import {
    uploadFloorImg,
    getFloorImg,
    deviceBindPoint,
    getDeviceType,
    getDoorDevList,
} from '../../url/api';
export default {
    data() {
        return {
            uploadPath: '/api/v1.0/file/upload/file',
            review: false,
            devBrandList: [], //设备品牌
            formSearch: {
                drawerDevSys: 1, // 设备系统
                deviceBrand: '', // 设备类型
                xqId: '',
            },
            tableData: [],
            drawer: false,
            imgPoint: {
                url: '',
            },
            options: [],
            devName: '',
            value: '',
            sectionId: null,
            params: {},
            tableFlag:1
        };
    },
    methods: {
        onSuccess(response, file, fileList) {
            console.log(response, file, fileList);
            if (response.code == 200) {
                uploadFloorImg({
                    xqId: this.params.xqId,
                    baseMap: response.data[0],
                    id: this.params.sectionId,
                    state: 0,
                    systemType: this.formSearch.drawerDevSys,
                    deviceType: this.formSearch.deviceBrand,
                }).then((res) => {
                    if (res.data.code == 200) {
                        console.log('bind获取图片的参数',{
                            state: 0,
                            xqId: this.params.xqId,
                            id: this.params.sectionId,
                            systemType: this.formSearch.drawerDevSys,
                            deviceType: this.formSearch.deviceBrand,
                        });
                        this.getImg({
                            state: 0,
                            xqId: this.params.xqId,
                            id: this.params.sectionId,
                            systemType: this.formSearch.drawerDevSys,
                            deviceType: this.formSearch.deviceBrand,
                        });
                        this.$message.success('修改成功');
                        this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
                    }
                });
            }
        },
        beforeUpload(file) {
            if (!this.params.xqId && !this.params.sectionId) {
                this.$message.error('请先选择小区和区域');
                return false;
            }
        },
        onError(err, file, fileList) {
            // console.log(err,file,fileList);
            this.$message.error(err);
        },
        /* 选择系统  抽屉 */
        changeSelect(type) {
            // console.log('绑点系统type',type);
            this.tableFlag = type;
            if(type == 5){
                this.tableFlag = 4
            }
            getDeviceType({ type }).then((res) => {
                if (res.data.code == 200) {
                    this.devBrandList = res.data.data;
                    this.formSearch.deviceBrand =
                        this.devBrandList[0].deviceType;
                }
            });
            
        },
        // 通过类型返回系统
        getSystemName(type) {
            if (type == 1) {
                return '监控';
            } else if (type == 2) {
                return '门禁';
            } else if (type == 3) {
                return '停车场';
            } else if (type == 4 || type == 5) {
                return '安防报警-公区';
            } else if (type == 6) {
                return '火灾报警';
            }
        },
        save() {
            let { tsf:{chaX,chaY,zoom},imgW,imgH, sectionId, xqId } = this.params;
            console.log(chaX,chaY);
            if (!this.params.list.length) {
                this.$message.error('请先添加设备');
                return;
            }
            console.log('保存列表',this.params.list);
            let arr = [];
            this.params.list.forEach((item) => {
                let obj = { 
                    deviceType: item.deviceBrand,
                    systemType: this.getSystemName(item.deviceType),
                    deviceId: item.deviceCode,
                    devName: item.deviceName,
                    xqId: xqId,
                    id: sectionId,
                    x: item.x,
                    y: item.y,
                };
                console.log("保存的值",obj);
                if (item.deviceSystem == 1) {
                    obj.deviceId = item.cameraCode + '_' + item.channelSeq;
                }
                arr.push(obj);
            });
            console.log('处理成功的列表',arr);
            deviceBindPoint({
                deviceDTOS: arr,
            }).then((res) => {
                if (res.data.code == 200) {
                    this.review = true;
                    this.$message.success('绑定成功！');
                    if(!chaX)chaX = 0
                    if(!chaY)chaY = 0;
                    if(!zoom)zoom = 1;
                    setTimeout(() => {
                        this.review = false;
                    }, 300);
                }
            });
        },
        addDevice() {
            if (!this.sectionId) {
                this.$message.error('请先选择区域');
                return;
            }
            // if (!this.imgPoint.url) {
            if (!this.params.addDevFlag) {
                this.$message.error('请先上传底图');
                return;
            }

            this.drawer = true;
        },
        //关闭抽屉
        closeDrawer(val) {
            this.drawer = val;
        },
        //传过来的数据 小区id  区域id
        getData(val) {
            let { xqId, sectionId } = val;
            this.params = val;
            this.sectionId = sectionId;
            this.formSearch.xqId = xqId;
            console.log('传过来的数据', val);
            // this.getImg({
            //     state: 0,
            //     xqId,
            //     id: sectionId,
            //     systemType: val.systemType,
            //     deviceType: val.deviceBrand,
            // });
        },
        getImg(param) {
            getFloorImg(param).then((res) => {
                console.log('获取图片', res.data.code,res.data.data);
                if (res.data.code == 200 && res.data.data) {
                    this.imgPoint.url = res.data.data.baseMap;
                } else {
                    // this.$set(this.imgPoint, 'url', '');
                    this.imgPoint.url = ''
                }
                this.$forceUpdate();
            });
        },
        getDoorList() {
            getDoorDevList({
                size: 10,
                current: 1,
                xqId: this.formSearch.xqId,
            }).then((res) => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data.records;
                }
            });
        },
    },
    watch: {
        sectionId(val, oldVal) {
            if (!val) this.tableData = [];
        },
    },
    mounted() {
        // this.imgPoint.url = '';
        getDeviceType({ type: 1}).then((res) => {
            if (res.data.code == 200) {
                this.devBrandList = res.data.data;
                // console.log(this.devBrandList[0]);
                this.formSearch.deviceBrand = this.devBrandList[0].deviceType;
            }
        });
    },
    components: {
        commonLayout,
        tips,
        doorDevInfo,videoList,parking,mapping,fire
    },
};
</script>

<style scoped lang='scss'>
.form_demo {
    display: inline-block;
    height: 100%;
    padding-left: 10px;
}
.searchForm {
    display: flex;
    text-align: right;
    height: 100%;
    .point {
        flex: 3;
    }
    .form {
        flex: 7;
        padding-right: 10px;
        & /deep/ .marginLeft10 {
            width: 156px;
        }
    }
}
.img {
    width: 100%;
    height: 100%;
    // background-image: url('../../assets/images/cad/a3_a4_1f.png');
    background-size: cover;
}
.statusIcon {
    $statusIcon: 20px;
    display: inline-block;
    width: $statusIcon;
    height: $statusIcon;
    // border-radius: $statusIcon;
    // line-height: 10px;
    vertical-align: middle;
    border-radius: 50%;
}
.statusIcon:nth-child(1) {
    background: #1f807f;
    // background-size: 100% 100%;
}
.statusIcon:nth-child(2) {
    background: #f70000;
    // background-size: 100% 100%;
}
.statusIcon:nth-child(3) {
    background: #c3c3c3;
    // background-size: 100% 100%;
}
// .marginLeft10 {
//     margin-left: 10px;
//     width: none !important;
// }
// .marginLeft10 + .el-input {
//     width: none !important;
// }
</style>